<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/include.inc.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/WEB-INF/views/layout/miiteen/base.ref.jsp" %>
</head>
<body>
<div class="mainpage edit">
    <!--顶部菜单-->
    <div class="page-topmenu">
        <div class="btn-panel">
            <el-button type="primary" size="small" icon="el-icon-check" @click="save">保存</el-button>
        </div>
        <div class="btn-panel">
            <el-button size="small" icon="el-icon-back" @click="back">返回</el-button>
        </div>
    </div>
    <!--编辑表单-->
    <el-form :ref="formid" :model="form" :rules="rules" size="small" :label-width="labelwidth"
             :label-position="labelposition"
             class="one-col" :validate-on-rule-change="false">
        <!--视业务进行更改-begin-->
        <el-form-item label="编码" prop="settingCode">
            <el-input v-model="form.settingCode" placeholder="编码"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="settingName">
            <el-input v-model="form.settingName" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="用途">
            <el-select v-model="form.customCodeUseId" placeholder="请选择">
                <el-option
                        v-for="item in uselist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <!--视业务进行更改-end-->
    </el-form>
    <el-button type="primary" size="mini" @click="subadd()">添加</el-button>
    <el-table
            :data="form.subList"
            style="width: 100%">
        <el-table-column prop="name" label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="subadd(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="subdel(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        <el-table-column label="类型" prop="pattern">
            <template slot-scope="scope">
                {{getpattern(scope.row.pattern)}}
            </template>
        </el-table-column>
        <el-table-column label="格式" prop="format">
            <template slot-scope="scope">
                {{getformatText(scope.row.format)}}
            </template>
        </el-table-column>
        <el-table-column label="当前值" prop="curVal">
        </el-table-column>
        <el-table-column label="顺序" prop="sn">
        </el-table-column>
    </el-table>
    <el-dialog title="" :visible.sync="subformVisible" :modal="false" width="400px" center>
        <el-form :model="subform" class="one-col" size="small" :label-width="labelwidth"
                 :label-position="labelposition">
            <el-form-item label="类型">
                <el-select v-model="subform.pattern" placeholder="请选择" @change="patternChange">
                    <el-option
                            v-for="item in patterns"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="格式">
                <el-select v-model="subform.format" placeholder="请选择">
                    <el-option
                            v-for="item in formats"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="当前值">
                <el-input v-model="subform.curVal"></el-input>
            </el-form-item>
            <el-form-item label="顺序">
                <el-input v-model="subform.sn"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="subformVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveSub">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    //初始化数据，必须放置在列表页面封装部分前
    function initVueOption(obj) {
        //设置控制器
        obj.data.controller = "${ctx}/customcode/customcodeseeting";
        //设置表单数据
        obj.data.form = ${customCodeSeeting};
        //设置校验规则，没有则删掉
        obj.data.rules = {
            settingCode: [
                {required: true, message: '请输入编码', trigger: 'blur'}
            ],
            settingName: [
                {required: true, message: '请输入名称', trigger: 'blur'}
            ]
        }

        //用途
        obj.data.uselist =${uselist};
        //类型
        obj.data.patterns = [{id: 1, name: "文本"}, {id: 2, name: "当前日期"}, {id: 3, name: "重复计数"}];
        //格式
        obj.data.formats = getformat("1");

        /*============================================子表操作-begin==============================================*/
        //子表编辑界面显示状态
        obj.data.subformVisible = false;
        //子表对象
        obj.data.subform = {};
        //设置子表新增数据索引
        obj.data.subgridindex = -1;
        //子表添加数据方法
        obj.methods.subadd = function (obj) {
            this.openSub(obj);
        }
        //子表删除数据方法
        obj.methods.subdel = function (id) {
            JsonArrayUtils.remove(this.form.subList, "id", id);
        }
        //打开子表编辑界面弹窗
        obj.methods.openSub = function (obj) {
            if (obj) {
                this.formats = getformat(obj.pattern);
                this.subform = obj;
                this.subform.format = obj.format.toString();
            } else {
                this.subform = {};
            }
            this.subformVisible = true;
        }
        obj.methods.saveSub = function () {

            if (!this.subform.id) {
                this.subform.id = this.subgridindex;
                this.form.subList.push(this.subform);
                this.subgridindex--;
            }
            this.subform = {};
            this.subformVisible = false
        }
        obj.methods.patternChange = function () {
            this.formats = getformat(this.subform.pattern);
        }
        /*============================================子表操作-end==============================================*/

        obj.methods.getpattern = function (key) {
            switch (key) {
                case 1:
                    return "文本";
                case 2:
                    return "当前日期";
                case 3:
                    return "重复计数";
            }
        }
        obj.methods.getformatText = function (key) {

            switch (Number(key)) {
                case 0:
                    return "无";
                case 21:
                    return "YY";
                case 22:
                    return "YYYY";
                case 23:
                    return "MM";
                case 24:
                    return "DD";
                case 25:
                    return "YYYYMMDD";
                case 26:
                    return "YYYY-MM-DD";
                case 31:
                    return "每日重复计数";
                case 32:
                    return "每周重复计数";
                case 33:
                    return "每月重复计数";
                case 34:
                    return "每年重复计数";
            }
        }
    }


    var pattern = [
        {
            name: "1",
            select: [
                {name: "无", value: "0"}
            ]
        }, {
            name: "2",
            select: [
                {name: "YY", value: "21"},
                {name: "YYYY", value: "22"},
                {name: "MM", value: "23"},
                {name: "DD", value: "24"},
                {name: "YYYYMMDD", value: "25"},
                {name: "YYYY-MM-DD", value: "26"}
            ]
        }, {
            name: "3",
            select: [
                {name: "每日重复计数", value: "31"},
                {name: "每周重复计数", value: "32"},
                {name: "每月重复计数", value: "33"},
                {name: "每年重复计数", value: "34"}
            ]
        }]

    //获取格式选项
    function getformat(parrentname) {
        for (var i = 0; i < pattern.length; i++) {
            if (pattern[i].name == parrentname) {
                return pattern[i].select;
            }
        }
    }


</script>
<!--编辑页面封装部分-->
<%@include file="/WEB-INF/views/layout/miiteen/page.edit.ref.jsp" %>
</body>
</html>